<div class="apes-internal-association">

  <!--内协分析-->
  <apes-card apesTitle="内协效率统计">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="effectivenessModel" [fields]="effectivenessField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshEffectivenessData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">

      <div apes-col [apesSpan]="24">
                <apes-charts [id]="'salesBar'" [data]="effectivenessBarData" [option]="effectivenessBarOption"
                             [loading]="effectivenessBarLoading"></apes-charts>
      </div>

    </div>

    <div apes-row [apesGutter]="16" apesType="flex" apesJustify="center">

      <div apes-col [apesSpan]="12">

        <apes-table #rankTable
                    apesBordered
                    apesSize="small"
                    [apesScroll]="{ y: '500px' }"
                    [apesFrontPagination]="false"
                    [apesShowPagination]="false"
                    [apesLoading]="effectivenessFromLoading"
                    [apesData]="effectivenessFromData">
          <thead>
          <tr>
            <th style='width: 15%' [apesAlign]="'center'">统计时间</th>
            <th style='width: 15%' [apesAlign]="'center'">基地名称</th>
            <th style='width: 15%' [apesAlign]="'center'">内协接车数量</th>
            <th style='width: 15%' [apesAlign]="'center'">占比</th>
            <th style='width: 15%' [apesAlign]="'center'">内协接车平均耗时</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of rankTable.data">
            <td style='width: 15%' [apesAlign]="'center'">{{data.time}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.baseName}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.pickAmount}}</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.accountFor}}%</td>
            <td style='width: 15%' [apesAlign]="'center'">{{data.averageTime}}小时</td>
          </tr>
          </tbody>
        </apes-table>

      </div>

    </div>

  </apes-card>

  <!--内协分析-->
  <apes-card apesTitle="内协基地统计">

    <!--查询区-->
    <div apes-row [apesGutter]="16" class="apes-item" style="padding: 16px;">
      <formly-form [model]="baseModel" [fields]="baseField"></formly-form>
      <div apes-col [apesSpan]="4">
        <button apes-button [apesSize]="'default'" (click)="refreshBaseData()">刷新</button>
      </div>
    </div>

    <!--展示区-->
    <div apes-row [apesGutter]="16">

      <div apes-col [apesSpan]="8">
        <apes-charts [id]="'basePie'" [data]="basePieData" [option]="basePieOption"
                     [loading]="basePieLoading"></apes-charts>
      </div>

      <div apes-col [apesSpan]="16">
        <apes-charts [id]="'baseBar'" [data]="baseBarData" [option]="baseBarOption"
                     [loading]="baseBarLoading"></apes-charts>
      </div>

    </div>

  </apes-card>

</div>


